<template>
  <div class="rejected-list">
    <!-- 搜索和筛选 -->
    <div class="header-bar" style="justify-content: flex-end;">
      <el-input
        placeholder="请输入单据编号"
        style="width: 250px; float: right; margin-bottom: 10px;"
        v-model="queryParams.keyword"
        @keyup.enter="handleSearch"
        clearable
      >
        <template #append>
          <el-button icon="Search" @click="handleSearch"></el-button>
        </template>
      </el-input>
    </div>

    <!-- <div class="filter-container">
      <el-input
        v-model="queryParams.requestNo"
        placeholder="请输入单据编号"
        style="width: 200px"
        class="filter-item"
        @keyup.enter="handleSearch"
      />
      <el-input
        v-model="queryParams.content"
        placeholder="请输入申请原因"
        style="width: 200px"
        class="filter-item"
        @keyup.enter="handleSearch"
      />
      <el-input
        v-model="queryParams.applicantName"
        placeholder="请输入申请人"
        style="width: 200px"
        class="filter-item"
        @keyup.enter="handleSearch"
      />
      <el-date-picker
        v-model="queryParams.dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="filter-item"
        style="width: 240px"
        @change="handleSearch"
      />
      <el-button type="primary" icon="Search" class="filter-item ml20" @click="handleSearch">
        搜索
      </el-button>
      <el-button icon="Refresh" class="filter-item" @click="resetQuery"> 重置 </el-button>
    </div> -->

    <!-- 已驳回表格 -->
    <el-table v-loading="loading" :data="approvalList" border style="width: 100%">
      <el-table-column
        prop="requestNo"
        label="单据编号"
        min-width="150"
        show-overflow-tooltip
      />
      <el-table-column prop="content" label="申请原因" min-width="200" show-overflow-tooltip />
      <el-table-column
        prop="comment"
        label="审批意见"
        min-width="150"
        show-overflow-tooltip
      />
      <el-table-column prop="applicantName" label="申请人" min-width="150" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="createTime" label="申请时间" width="180">
        <template #default="scope">
          {{ parseTime(scope.row.createTime) || '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="applyTime" label="本节点完成时间" width="180">
        <template #default="scope">
          {{ parseTime(scope.row.applyTime) || '-' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" fixed="right">
        <template #default="scope">
          <el-button type="primary" link @click="handleViewDetail(scope.row)"> 查看详情 </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="queryParams.pageNum"
        v-model:page-size="queryParams.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup name="RejectedList">
import { ref, reactive, onMounted, watch, defineProps } from 'vue'
import { ElMessage } from 'element-plus'
import {
  getApprovalListByStatus
} from '@/api/personCenter'

// 定义事件
const emit = defineEmits(['view-detail'])
// 定义props
const props = defineProps({
  currentTab: {
    type: String,
    default: ''
  }
})

// 表格数据
const loading = ref(false)
const approvalList = ref([])
const total = ref(0)

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  status: '03',
  // requestNo: '',
  // applicantName: '',
  // content: '',
  // dateRange: []
})

// 获取已驳回列表
const getRejectedList = async () => {
  loading.value = true
  getApprovalListByStatus(queryParams).then(res => {
    if (res.code === 200) {
      approvalList.value = res.data?.list || []
      total.value = res.data?.total || 0
      loading.value = false
    } else {
      ElMessage.warning('查询待审批列表失败')
    }
  }).catch(() => {
    approvalList.value = []
    total.value = 0
    loading.value = false
    ElMessage.error('查询待审批列表失败')
  }).finally(() => {
    loading.value = false
  })
}

// 搜索
const handleSearch = () => {
  queryParams.pageNum = 1
  getRejectedList()
}

// 重置查询
const resetQuery = () => {
  Object.assign(queryParams, {
    pageNum: 1,
    pageSize: 10,
    requestNo: '',
    applicantName: '',
    content: '',
    dateRange: []
  })
  getRejectedList()
}

// 分页处理
const handleSizeChange = (val) => {
  queryParams.pageSize = val
  getRejectedList()
}

const handleCurrentChange = (val) => {
  queryParams.pageNum = val
  getRejectedList()
}

// 查看详情
const handleViewDetail = (row) => {
  emit('view-detail', row)
}

// 初始化
onMounted(() => {
  getRejectedList()
})

// 监听tab变化，重新加载数据
watch(() => props.currentTab, (newTab) => {
  if (newTab === 'rejected') {
    getRejectedList()
  }
}, { immediate: false })
</script>

<style lang="scss" scoped>
.filter-item {
  margin-right: 10px;
  margin-bottom: 10px;
}

.search-icon,
.calendar-icon {
  margin-left: 5px;
  cursor: pointer;
  color: #409eff;
}

.search-icon:hover,
.calendar-icon:hover {
  color: #66b1ff;
}
</style>
